<!DOCTYPE html>
{% load static %}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fan MMORPG Site</title>
    <script async charset="utf-8" src="//cdn.embedly.com/widgets/platform.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <style>
      body {
        padding-top: 60px;
      }
    </style>
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
          <a class="navbar-brand" href="{% url 'announcement_list' %}">Fan MMORPG</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link" href="{% url 'announcement_list' %}">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'announcement_create' %}">Create Announcement</a>
              </li>
              {% if user.is_authenticated %}
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">{{ user.username }}</a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li>
                      <a class="dropdown-item" href="{% url 'profile' user %}">Announcements</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="{% url 'response_list' user %}">Responses</a>
                    </li>
                    <li>
                      <hr class="dropdown-divider" />
                    </li>
                    <li>
                      <a class="dropdown-item" href="{% url 'account_logout' %}">Logout</a>
                    </li>
                  </ul>
                </li>
              {% else %}
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'account_login' %}">Login</a>
                </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>
      {% block header %}

      {% endblock %}
    </header>

    <main>
      <div class="container">
        {% block content %}

        {% endblock %}
      </div>
    </main>

    <footer class="bg-dark text-white text-center py-1">
      <div class="container">
        <p>&copy; {{ year }} Fan MMORPG. All rights reserved.</p>
      </div>
    </footer>
    <script>
      document.querySelectorAll('oembed[url]').forEach((element) => {
        // Create the <a href="..." class="embedly-card"></a> element that Embedly uses
        // to discover the media.
        const anchor = document.createElement('a')
      
        anchor.setAttribute('href', element.getAttribute('url'))
        anchor.className = 'embedly-card'
      
        element.appendChild(anchor)
      })
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>
